{% extends "base.html" %}

{% block title %}工具箱 - 代码格式化{% endblock %}

{% block content %}
    <!-- 页面标题 -->
    <div class="bg-purple-600 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">代码格式化</h1>
                    <p class="mt-2">美化并格式化您的代码，提高可读性和开发效率</p>
                </div>
                <div class="bg-white bg-opacity-20 p-4 rounded-lg hidden md:block">
                    <div class="flex space-x-2 text-sm">
                        <a href="{{ url_for('main.index') }}" class="hover:underline">首页</a>
                        <span>/</span>
                        <a href="#" class="hover:underline">开发工具</a>
                        <span>/</span>
                        <span class="font-medium">代码格式化</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 侧边栏工具列表 -->
            <div class="w-full lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 text-gray-800">开发工具</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="{{ url_for('dev_tools.code_formatter') }}" class="flex items-center text-purple-600 font-medium">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code"></i>
                                </div>
                                <span>代码格式化</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('dev_tools.json_formatter') }}" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code-branch"></i>
                                </div>
                                <span>JSON格式化</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-search"></i>
                                </div>
                                <span>正则表达式测试</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <span>时间戳转换</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-hdd"></i>
                                </div>
                                <span>编码/解码</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-hashtag"></i>
                                </div>
                                <span>哈希计算</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-palette"></i>
                                </div>
                                <span>颜色选择器</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <!-- 最近使用记录 -->
                <div class="bg-white rounded-lg shadow-md p-6 mt-6">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">最近使用</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="{{ url_for('dev_tools.code_formatter') }}" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code text-purple-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>代码格式化</span>
                                    <p class="text-xs text-gray-500">10分钟前</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('dev_tools.json_formatter') }}" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code-branch text-purple-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>JSON格式化</span>
                                    <p class="text-xs text-gray-500">昨天</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('image_tools.image_compress') }}" class="flex items-center text-gray-600 hover:text-green-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-image text-green-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>图片压缩</span>
                                    <p class="text-xs text-gray-500">3天前</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 主工具区域 -->
            <div class="w-full lg:w-3/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <!-- 工具说明 -->
                    <div class="mb-6">
                        <h2 class="text-xl font-bold text-gray-800 mb-3">代码格式化</h2>
                        <p class="text-gray-600">
                            格式化并美化您的代码，使其更易阅读与维护。支持多种编程语言，自动缩进、对齐和语法高亮。
                        </p>
                    </div>
                    
                    <!-- 语言选择 -->
                    <form method="POST" action="{{ url_for('dev_tools.code_formatter') }}">
                        <div class="mb-6">
                            <label class="block text-gray-700 font-medium mb-2">编程语言</label>
                            <select name="language" class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                <option value="javascript">JavaScript</option>
                                <option value="html">HTML</option>
                                <option value="css">CSS</option>
                                <option value="python">Python</option>
                                <option value="java">Java</option>
                                <option value="php">PHP</option>
                                <option value="csharp">C#</option>
                                <option value="cpp">C++</option>
                                <option value="ruby">Ruby</option>
                                <option value="go">Go</option>
                                <option value="sql">SQL</option>
                            </select>
                        </div>
                        
                        <!-- 输入区域 -->
                        <div class="mb-6">
                            <label class="block text-gray-700 font-medium mb-2">输入代码</label>
                            <textarea 
                                name="code_input"
                                class="w-full h-64 p-4 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-purple-500 font-mono text-sm"
                                placeholder="在此粘贴您的代码..."
                            >function example() {
    console.log("Hello World");
    var x=10;
    if(x>5){
  console.log("x is greater than 5");
  } else {
      console.log("x is less than or equal to 5");
      }
}</textarea>
                            <div class="mt-2 flex justify-between text-sm">
                                <span class="text-gray-500">字符数: <span id="char-count">152</span></span>
                                <button type="button" id="clear-input" class="text-purple-600 hover:underline">清空</button>
                            </div>
                        </div>
                        
                        <!-- 格式化选项 -->
                        <div class="mb-6">
                            <div class="bg-gray-100 p-4 rounded-md">
                                <h3 class="font-medium text-gray-800 mb-3">格式化选项</h3>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div>
                                        <label class="block text-gray-700 mb-1 text-sm">缩进大小</label>
                                        <select name="indent_size" class="w-full border border-gray-300 rounded-md p-1 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                            <option value="2">2 空格</option>
                                            <option value="4" selected>4 空格</option>
                                            <option value="tab">Tab</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 mb-1 text-sm">换行符</label>
                                        <select name="line_ending" class="w-full border border-gray-300 rounded-md p-1 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                            <option value="lf">LF (Unix/Linux)</option>
                                            <option value="crlf">CRLF (Windows)</option>
                                            <option value="cr">CR (Mac)</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 mb-1 text-sm">引号样式</label>
                                        <select name="quote_style" class="w-full border border-gray-300 rounded-md p-1 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                            <option value="single">单引号 (')</option>
                                            <option value="double">双引号 (")</option>
                                            <option value="original">保持原样</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="remove_semicolons" name="remove_semicolons" class="h-4 w-4 text-purple-600">
                                        <label for="remove_semicolons" class="ml-2 text-gray-700 text-sm">移除分号 (仅适用于JavaScript)</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="preserve_newlines" name="preserve_newlines" class="h-4 w-4 text-purple-600" checked>
                                        <label for="preserve_newlines" class="ml-2 text-gray-700 text-sm">保留换行符</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="brace_style" name="brace_style" class="h-4 w-4 text-purple-600" checked>
                                        <label for="brace_style" class="ml-2 text-gray-700 text-sm">花括号在同一行</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="checkbox" id="auto_format" name="auto_format" class="h-4 w-4 text-purple-600" checked>
                                        <label for="auto_format" class="ml-2 text-gray-700 text-sm">自动格式化</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="mb-6 flex flex-wrap gap-3">
                            <button type="submit" name="action" value="format" class="bg-purple-600 text-white py-2 px-6 rounded-md hover:bg-purple-700 font-medium">
                                格式化代码
                            </button>
                            <button type="submit" name="action" value="minify" class="bg-gray-200 text-gray-700 py-2 px-6 rounded-md hover:bg-gray-300 font-medium">
                                压缩代码
                            </button>
                            <button type="button" id="restore-original" class="bg-gray-200 text-gray-700 py-2 px-6 rounded-md hover:bg-gray-300 font-medium">
                                还原原始代码
                            </button>
                        </div>
                    </form>
                    
                    <!-- 输出区域 -->
                    <div class="mb-6">
                        <div class="flex justify-between mb-2">
                            <label class="block text-gray-700 font-medium">格式化结果</label>
                            <div class="flex space-x-2">
                                <button id="copy-result" class="text-purple-600 hover:underline text-sm flex items-center">
                                    <i class="far fa-copy mr-1"></i> 复制
                                </button>
                                <button id="download-result" class="text-purple-600 hover:underline text-sm flex items-center">
                                    <i class="far fa-file-download mr-1"></i> 下载
                                </button>
                            </div>
                        </div>
                        <div class="w-full h-64 p-4 border border-gray-300 rounded-md bg-gray-50 font-mono text-sm overflow-auto">
                            <pre id="result" class="text-gray-800">function example() {
    console.log("Hello World");
    var x = 10;
    if (x > 5) {
        console.log("x is greater than 5");
    } else {
        console.log("x is less than or equal to 5");
    }
}</pre>
                        </div>
                    </div>
                    
                    <!-- 说明和提示 -->
                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="font-bold text-gray-800 mb-3">使用提示</h3>
                        <div class="text-gray-600 space-y-2">
                            <p>•&nbsp;&nbsp;格式化功能会自动修复缩进、空格和换行，使代码更易读</p>
                            <p>•&nbsp;&nbsp;压缩功能会移除所有不必要的空格、注释和换行，减小文件体积</p>
                            <p>•&nbsp;&nbsp;对于JavaScript，可选择是否保留分号</p>
                            <p>•&nbsp;&nbsp;格式化不会改变代码逻辑和功能</p>
                        </div>
                        
                        <div class="mt-6 bg-blue-50 p-4 rounded-md">
                            <h4 class="font-medium text-blue-800 mb-2">小贴士</h4>
                            <p class="text-blue-700 text-sm">
                                在团队协作中，使用统一的代码格式规范可以提高代码可读性和维护性。建议在项目中使用ESLint、Prettier等工具自动化格式化流程。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 相关工具 -->
                <div class="mt-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-4">相关工具</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        <a href="{{ url_for('dev_tools.json_formatter') }}" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-purple-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-code-branch text-purple-600 mr-2"></i>
                                    <h3 class="font-bold">JSON格式化</h3>
                                </div>
                                <p class="text-gray-600 text-sm">格式化、校验和美化JSON数据</p>
                            </div>
                        </a>
                        
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-purple-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-search text-purple-600 mr-2"></i>
                                    <h3 class="font-bold">正则表达式测试</h3>
                                </div>
                                <p class="text-gray-600 text-sm">测试和验证正则表达式匹配结果</p>
                            </div>
                        </a>
                        
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-purple-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-file-code text-purple-600 mr-2"></i>
                                    <h3 class="font-bold">HTML转义/反转义</h3>
                                </div>
                                <p class="text-gray-600 text-sm">对HTML字符进行转义或反转义处理</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 计算字符数
        const codeInput = document.querySelector('textarea[name="code_input"]');
        const charCount = document.getElementById('char-count');
        const originalCode = codeInput.value;
        
        function updateCharCount() {
            charCount.textContent = codeInput.value.length;
        }
        
        codeInput.addEventListener('input', updateCharCount);
        
        // 清空按钮
        const clearButton = document.getElementById('clear-input');
        clearButton.addEventListener('click', function() {
            codeInput.value = '';
            updateCharCount();
        });
        
        // 还原原始代码按钮
        const restoreButton = document.getElementById('restore-original');
        restoreButton.addEventListener('click', function() {
            codeInput.value = originalCode;
            updateCharCount();
        });
        
        // 复制按钮
        const copyButton = document.getElementById('copy-result');
        const resultText = document.getElementById('result');
        
        copyButton.addEventListener('click', function() {
            const textToCopy = resultText.textContent;
            navigator.clipboard.writeText(textToCopy).then(function() {
                alert('代码已复制到剪贴板');
            }, function() {
                alert('复制失败，请手动复制');
            });
        });
        
        // 下载按钮
        const downloadButton = document.getElementById('download-result');
        
        downloadButton.addEventListener('click', function() {
            const textToDownload = resultText.textContent;
            const blob = new Blob([textToDownload], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = '格式化代码.txt';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
    });
</script>
{% endblock %} 